<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离线模式 - 固定资产管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .offline-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 90%;
        }
        
        .offline-icon {
            font-size: 4rem;
            color: #ffc107;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .offline-title {
            color: #333;
            margin-bottom: 15px;
        }
        
        .offline-description {
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .retry-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            color: white;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .retry-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            color: white;
        }
        
        .offline-features {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
            text-align: left;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .feature-item i {
            color: #28a745;
            margin-right: 10px;
            width: 20px;
        }
        
        .network-status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            font-size: 0.9em;
        }
        
        .status-offline {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status-online {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
</head>
<body>
    <div class="offline-container">
        <div class="offline-icon">
            <i class="fas fa-wifi" id="wifiIcon"></i>
        </div>
        
        <h2 class="offline-title">您当前处于离线状态</h2>
        
        <p class="offline-description">
            无法连接到服务器，请检查您的网络连接。
            您仍然可以使用一些离线功能。
        </p>
        
        <button class="btn retry-btn" onclick="checkConnection()">
            <i class="fas fa-sync-alt"></i> 重试连接
        </button>
        
        <div class="network-status status-offline" id="networkStatus">
            <i class="fas fa-exclamation-triangle"></i> 网络连接不可用
        </div>
        
        <div class="offline-features">
            <h6><i class="fas fa-star"></i> 离线可用功能：</h6>
            <div class="feature-item">
                <i class="fas fa-check"></i>
                <span>查看已缓存的资产信息</span>
            </div>
            <div class="feature-item">
                <i class="fas fa-check"></i>
                <span>浏览历史记录</span>
            </div>
            <div class="feature-item">
                <i class="fas fa-check"></i>
                <span>离线数据录入（稍后同步）</span>
            </div>
            <div class="feature-item">
                <i class="fas fa-check"></i>
                <span>扫描二维码查看缓存信息</span>
            </div>
        </div>
        
        <div class="mt-3">
            <small class="text-muted">
                网络恢复后，离线期间的数据将自动同步
            </small>
        </div>
    </div>
    
    <script>
        // 检查网络连接
        function checkConnection() {
            const button = document.querySelector('.retry-btn');
            const icon = button.querySelector('i');
            
            // 显示加载状态
            button.disabled = true;
            icon.className = 'fas fa-spinner fa-spin';
            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 检查中...';
            
            // 尝试连接
            fetch('/', { 
                method: 'HEAD',
                cache: 'no-cache'
            })
            .then(response => {
                if (response.ok) {
                    // 连接成功，重定向到首页
                    window.location.href = '/';
                } else {
                    throw new Error('连接失败');
                }
            })
            .catch(error => {
                // 连接失败，恢复按钮状态
                setTimeout(() => {
                    button.disabled = false;
                    button.innerHTML = '<i class="fas fa-sync-alt"></i> 重试连接';
                    updateNetworkStatus();
                }, 1000);
            });
        }
        
        // 更新网络状态显示
        function updateNetworkStatus() {
            const statusDiv = document.getElementById('networkStatus');
            const wifiIcon = document.getElementById('wifiIcon');
            
            if (navigator.onLine) {
                statusDiv.className = 'network-status status-online';
                statusDiv.innerHTML = '<i class="fas fa-check-circle"></i> 网络连接已恢复';
                wifiIcon.className = 'fas fa-wifi';
                
                // 网络恢复后自动重定向
                setTimeout(() => {
                    window.location.href = '/';
                }, 2000);
            } else {
                statusDiv.className = 'network-status status-offline';
                statusDiv.innerHTML = '<i class="fas fa-exclamation-triangle"></i> 网络连接不可用';
                wifiIcon.className = 'fas fa-wifi';
                wifiIcon.style.opacity = '0.5';
            }
        }
        
        // 监听网络状态变化
        window.addEventListener('online', updateNetworkStatus);
        window.addEventListener('offline', updateNetworkStatus);
        
        // 初始化
        updateNetworkStatus();
        
        // 定期检查连接
        setInterval(() => {
            if (navigator.onLine) {
                checkConnection();
            }
        }, 30000); // 每30秒检查一次
    </script>
</body>
</html>